<template>
  <div>
    <s-nav-bar bg="#fff" color="#ff5722">
      <template #title>
        <div class="input-box">
          <form action="javascript:return true">
            <input ref="input" v-model.trim="searchContent" @keyup.13="handleSearch" class="input" type="text"
              placeholder="书名或者作者" />
          </form>
        </div>
      </template>
      <template #default>
        <div class="search-btn" @click="handleSearch">
          <van-icon name="search" size="21px" />
        </div>
      </template>
    </s-nav-bar>
    <div v-show="searching" class="loading-outer">
      <van-loading type="spinner" size="24px" vertical>搜索中...</van-loading>
    </div>
    <section class="searc_result">
      <div class="noresult" v-if="!resultList">
        <p>输入关键词，搜索你想要的书籍</p>
      </div>
      <template v-else-if="resultList.length > 0">
        <div class="searc_result_item" v-for="(item, index) in resultList" :key="index"
          @click="toBookDetailPage(item.path)">
          <div>
            <span class="item_label">名称：</span>
            {{ item.name }}
          </div>
          <div>
            <span class="item_label">作者：</span>
            {{ item.author }}
          </div>
          <div>
            <span class="item_label">状态：</span>
            {{ item.status }}
          </div>
          <div>
            <span class="item_label">最新章节：</span>
            {{ item.article }}
          </div>
        </div>
      </template>
      <div class="noresult" v-else>
        <div class="pic"></div>
        <p>没有找到相关内容，换个关键词试试</p>
      </div>
    </section>
  </div>
</template>

<script>
import sNavBar from '@/components/sNavBar.vue'
export default {
  name: 'searchView',
  components: {
    sNavBar,
  },
  data() {
    return {
      searchContent: '',
      resultList: null,
      searching: false,
    }
  },
  beforeRouteEnter(to, from, next) {
    if (from.path === '/home') {
      next(vm => {
        vm.resetData()
      })
    }
    next()
  },
  methods: {
    resetData() {
      this.searchContent = '';
      this.resultList = null;
      this.searching = false;
      this.$nextTick(() => {
        this.$refs.input.focus()
      })
    },
    toBookDetailPage(path) {
      this.$router.push({
        name: 'bookeDetailView',
        params: {
          path: path
        }
      })
    },
    getResult(keyword) {
      this.searching = true;
      this.resultList = [];
      this.$bqg.search(keyword).then(res => {
        this.batchRender(res || []);
        this.searching = false;
      })
    },
    handleSearch() {
      if (!this.searchContent) {
        return
      }
      this.$refs.input.blur()
      this.getResult(this.searchContent)
    },
    batchRender(array = []) {
      if (array.length == 0) {
        return
      }

      const doFn = (item) => {

        this.resultList.push(...item);

        this.batchRender(array);
      }

      requestAnimationFrame(() => doFn(array.splice(0, 20)));
    }
  }
}
</script>

<style scoped>
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
  display: none;
}

.input-box {
  height: 30px;
  border: 1px solid #ff5722;
  border-radius: 15px;
  overflow: hidden;
  padding: 0 15px;
}

.input {
  outline: none;
  border: none;
  width: 100%;
  height: 100%;
  font-size: 14px;
  color: #666;
}

.search-btn {
  color: #ff5722;
}

.searc_result {
  overflow: auto;
  font-size: 13px;
  color: #333;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.searc_result_item {
  padding: 20px;
  border-bottom: 1px solid #eee;
  color: #999;
}

.searc_result_item>div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item_label {
  display: inline-block;
  width: 5em;
  text-align: right;
  color: #666;
}

.noresult {
  text-align: center;
  margin-top: 50%;
  font-size: 13px;
  color: #ccc;
}

.noresult .pic {
  height: 80PX;
  background: url('~@/assets/img/404.png') no-repeat center;
  background-size: contain;
  margin-bottom: 20px;
}

.loading-outer {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: #fff;
}
</style>